<template>
  <div>
    <div class="ele-page-header">
      <div class="ele-page-title">支付配置</div>
      <div class="ele-page-desc">
        用于客户支付收款场景。
      </div>
    </div>
    <div class="ele-body">
      <el-card shadow="never">
        <el-form
          ref="form"
          :model="form"
          :rules="rules"
          label-width="120px"
          style="max-width: 700px; margin: 10px auto"
        >

        <el-form-item label="支付类型:" prop="pay_type">
            <el-radio-group v-model="form.pay_type">
              <el-radio :label="1" value="1" checked="true" >微信h5</el-radio>
              <el-radio :label="2" value="2" >服务商h5</el-radio>
              <el-radio :label="3" value="3"  >平台支付</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="APPID:" v-if="form.pay_type === 2 || form.pay_type === 1 " prop="appid">
            <el-input v-model="form.appid" placeholder="请输入APPID" class="my_input" clearable />
          </el-form-item>

          <el-form-item label="APP秘钥:" v-if="form.pay_type === 2 || form.pay_type === 1" prop="app_key">
            <el-input v-model="form.app_key" type="password"  class="my_input" placeholder="请输入app秘钥" clearable />
          </el-form-item>

          <el-form-item label="商户号:" v-if=" form.pay_type === 1 " prop="mchid">
            <el-input v-model="form.mchid" placeholder="请输入支付商户号" class="my_input" clearable />
          </el-form-item>
          <el-form-item label="子商户号:" v-if=" form.pay_type === 2 " prop="sub_mchid">
            <el-input v-model="form.sub_mchid" placeholder="请输入服务商商户号" class="my_input" clearable />
          </el-form-item>

           <el-form-item label="支付秘钥:" v-if=" form.pay_type === 1 || form.pay_type === 2 " prop="pay_key">
            <el-input v-model="form.pay_key" type="password" placeholder="请输入支付秘钥" class="my_input" clearable />
          </el-form-item>


          <el-form-item label="子商户APPID:" v-if=" form.pay_type === 2 " prop="sub_appid">
            <el-input v-model="form.sub_appid" placeholder="请输入子商户APPID" class="my_input" clearable />
          </el-form-item>







          <el-form-item>
            <el-button type="primary" :loading="loading" @click="submit">
              提交
            </el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script>
// import { payUpdate,queryPaySet  } from '@/api/common/set';
const DEFAULT_FORM = {
      id: null,
          appid: null,
          app_key: null,
          mchid: null,
          pay_key: null,
          pay_type:1
  };
  export default {
    name: 'SetPay',
    data() {
      return {
        // 提交状态
        loading: false,
        form: {
          ...DEFAULT_FORM
        },
        // 表单验证规则
        rules: {
          appid: [
            {
              required: true,
              message: '请输入APPID',
              trigger: 'blur'
            }
          ],
          app_key: [
            {
              required: true,
              message: '请输入APP秘钥',
              trigger: 'blur'
            }
          ],
          sub_mchid: [
            {
              required: true,
              message: '请输入子商户号',
              trigger: 'blur'
            }
          ],

          sub_appid: [
            {
              required: true,
              message: '请输入子商户appid',
              trigger: 'blur'
            }
          ],

          mchid: [
            {
              required: true,
              message: '请输入商户号',
              trigger: 'blur'
            }
          ],
          pay_key: [
            {
              required: true,
              message: '请输入支付秘钥',
              trigger: 'blur'
            }
          ]
        },

      };
    },
    methods: {
      /* 提交 */
     submit() {
        this.$refs['form'].validate((valid) => {
          if (valid) {
            this.loading = true;
          console.log(this.form);
          payUpdate(this.form)
            .then((msg) => {
              this.loading = false;
              this.$message.success(msg);
            })
            .catch((e) => {
              this.loading = false;
              this.$message.error(e.message);
            });


          } else {
            return false;
          }
        });
      },

    },
     mounted() {
        query({group:'pay'})
            .then((msg) => {

              if(msg != null && msg.id!=null){
                this.form = msg;
              }
            })
            .catch((e) => {
              this.$message.error(e.message);
            });
     }
  };
</script>
<style>
 .my_input{
  width: 400px;
 }
</style>
